<!--预览模式-->
<script setup lang="js">

import {defineProps, onMounted, ref} from "vue";
import LcuChampionProfile from "@share/components/lcu/LcuChampionProfile.vue";
import KDA from "@share/components/lcu/KDA.vue";
import LcuItem from "@share/components/lcu/LcuItem.vue";
import {getSingleGameRecordInfo} from "@share/utils/rank.js";
import LcuSummonerName from "@share/components/lcu/LcuSummonerName.vue";

const gameDetailInfo = ref({});

const {gameId, summonerInfo} = defineProps(['gameId', 'summonerInfo']);

onMounted(() => {
  getSingleGameRecordInfo({gameId, summonerInfo}).then(data => {
    gameDetailInfo.value = data;
  })
})


</script>

<template>
  <template v-for="(team,idx) in gameDetailInfo?.participantInfos||[]">
    <el-table :data="team" size="small">
      <el-table-column :label="`${team[0]?.baseInfo?.win==='Win'?'胜利':'失败'}(${idx===0?'蓝色方':'红色方'})`"
                       width="150px">
        <template #default="scope">
          <LcuChampionProfile :champion-id="scope.row?.champion?.championId"/>
          <LcuSummonerName style="width: 100px;margin-left: 3px" size="small" :show-num="false"
                           :name="scope.row?.player?.gameName" :num="scope.row?.player?.tagLine"></LcuSummonerName>
        </template>
      </el-table-column>
      <el-table-column label="KDA">
        <template #default="scope">
          <KDA
              :k="scope?.row?.data?.kda?.k"
              :d="scope?.row?.data?.kda?.d"
              :a="scope?.row?.data?.kda?.a"
          />
        </template>

      </el-table-column>
      <el-table-column label="伤害">
        <template #default="scope">
          伤害:{{ (scope.row?.data?.totalDamageDealtToChampions / 1000).toFixed(1) }}K
          防御：{{ (scope.row?.data?.totalDamageTaken / 1000).toFixed(1) }}K
        </template>

      </el-table-column>
      <el-table-column label="装备" width="200px">
        <template #default="scope">
          <LcuItem :item-id="scope.row?.champion?.items?.item0"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item1"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item2"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item3"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item4"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item5"/>
          <LcuItem :item-id="scope.row?.champion?.items?.item6"/>

        </template>
      </el-table-column>
    </el-table>
  </template>

</template>

<style scoped>

</style>